﻿@page "/datagrid/frozen-right"

@using Syncfusion.Blazor.Grids
@using blazor_griddata
@using BlazorDemos
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the frozen rows and columns feature of the Grid. Scroll the movable content vertically/horizontally to view the frozen rows/columns with the content.</p>
</SampleDescription>
<ActionDescription>
    <p>The freezing feature enables the user to freeze certain rows/columns on both sides to scroll the remaining movable content. This can be achieved by setting the <strong>Freeze</strong> and <strong>IsFrozen</strong> properties.</p>
    <p>In this demo sample, the OrderID column is frozen on the left side and ShipCountry column is frozen on the right side by setting the <strong>Column->IsFrozen</strong> property to true and <strong>Column->Freeze</strong> property to Left for OrderID column and Right for ShipCountry column.</p>
   
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" Height="400" FrozenRows="2" EnableHover="false" AllowSelection="false" AllowSorting="true">
                <GridColumns>
                    <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" Freeze="FreezeDirection.Left" IsFrozen="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" Width="170"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.ShipName) HeaderText="Ship Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.ShipAddress) HeaderText="Ship Address" Width="170"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.Mail) HeaderText="Email" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.Location) HeaderText="Location" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" Freeze="FreezeDirection.Right" IsFrozen="true" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }
    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}

